<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css"
	href="../Styles/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<style type="text/css">
.main {
	width: 500px;
	margin-left: 45px;
}

.left {
	width: 250px;
	float: left;
}

.right {
	width: 250px;
	height: 300px;
	float: right;
}

.image {
	width: 200px;
	height: 200px;
	margin-top: 70px;
	margin-left: 20px;
	border: 1px solid #000;
}

img {
	width: 200px;
	height: 200px;
}

tr {
	height: 33px;
}

.s1{
  width:100px;
  height:50px;

   margin-top: 10px;
   margin-left: 50px;
}
</style>
</head>
<body>
	<div class="main" id="main">
		<div class="left">
			<h2>修改个人信息</h2>
			<input type="hidden" value="{{user.uid}}" id="uid">
			<form method="post" action="../modifyUser" id="form">
			  
				<table id="table">
					<tr>
						<td>登录名:</td>
						<td><input type="text" name="username" value="{{user.username }}"></td>
					</tr>
					<tr>
						<td>真实姓名:</td>
						<td><input type="text" name="uname" value="{{user.uname }}"></td>
					</tr>
					<tr>
						<td>所在部门:</td>

						<td>
						<select id="subject0" name="udepartment_id">					
						  <template v-for ="section in sectionList" > 
						    
						       <template v-if="user.seabout==section.seabout">
						       <option value="{{section.seorid}}" selected="selected">{{section.seabout}}</option>
						       </template> 
						      <template v-if="user.seabout!=section.seabout">
						       <option value="{{section.seorid}}" >{{section.seabout}}</option>
						      </template>
						  </template>
				             
						</select></td>
					</tr>
					<tr>
						<td>性别:</td>
						<td>
						<template v-if="user.usex=='男'">
						<input type="radio" name="my_sex" value="男" checked="checked">男						
						</template>
						<template v-else>
						<input type="radio" name="my_sex" value="男" >男						
						</template>
						<template v-if="user.usex=='女'">
						<input type="radio" name="my_sex" value="女" checked="checked">女						
						</template>
						<template v-else>
						<input type="radio" name="my_sex" value="女" >女						
						</template>
						
						</td>
					</tr>
					<tr>
						<td>职称:</td>
						<td><input type="text" name="ujob" value="{{user.ujob }}"></td>
					</tr>
					<tr>
						<td>角色:</td>
						<td>
						<select id="" name="urole">					
						  <template v-for ="role in roleList" > 
						       <template v-if="user.rolename==role.rolename">
						       <option value="{{role.roleid}}" selected="selected">{{role.rolename}}</option>
						       </template> 
						      <template v-if="user.rolename!=role.rolename">
						       <option value="{{role.roleid}}" >{{role.rolename}}</option>
						      </template>
						  </template>
				             
						</select>
						
						</td>
					</tr>
					<tr>
						<td>状态:</td>
						
						<td>
						
						<select id="" name="ustate">											 
						       <template v-if="user.ustate=='正常'">
						       <option value="正常" selected="selected">正常</option>
						       </template> 
						      <template v-else>
						       <option value="正常" >正常</option>
						      </template>
						       <template v-if="user.ustate=='冻结'">
						       <option value="冻结" selected="selected">冻结</option>
						       </template> 
						      <template v-else>
						       <option value="冻结" >冻结</option>
						      </template>				             
						</select>
						
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div class="right">
			<div class="image">
				<img alt="" src="../head-portrait/{{user.uhead }}" id='show'>
			</div>
			<div class="s1">
			<button class="btn btn-primary" id="changeImg">更换照片</button>
			<form action="" id="uploadform" method="post">
			<input type="file" style="display: none" id="file" name="file" onchange="c()">
			</form>
			</div>
			
		</div>
		<div>
			<button class="btn btn-primary" id="submit">提交</button>
		</div>
	</div>

<script type="text/javascript">
 $(function(){
	 var test = window.location.href;
	 var uid=test.substring(test.lastIndexOf("=")+1);
	 console.log(uid);
	 var vue = new Vue({
		 el:'#main',
		 data:{user:"",sectionList:"",roleList:""},
		 methods:{
			 getUserSectionRole:function(){
				 var _self = this;
				 $.ajax({
					 url:'../getUserRoleSection',
					 data:{'uid':uid},
					 dataType:'json',
					 success :function(result){
						 console.log(result);
						 _self.user=result.user;
						 _self.sectionList = result.sectionList;
						 _self.roleList = result.roleList;
						 console.log(_self.user);
					 }
				 })
			 }
		 }
	 })
	 
	 vue.getUserSectionRole();
	 
	 $("#changeImg").click(function(){
		 $("#file").trigger("click");
	 })
	 
	 $(document).on("change", "#file", function(){
		 console.log("test");
		 var uid = $("#uid").val();
		 var file = new FormData($('#uploadform')[0]);
		 file.append("uid",uid);
		 
		 console.log(uid);
		 $.ajax({
			 url:'../addCarManage',
			 type:'post',
			 data:file,
			 processData: false,
			 contentType: false,
			 dataType:"JSON",
			 success :function(result){
				 if(result==true){
					 alert("更换成功")
					 
				 }else{
					 alert("失败")
				 }
			 }
		 }) 
	 }) 
	 

 })
  function c () {
		 var r= new FileReader();
		 f=document.getElementById('file').files[0];
		 console.log(f);
		 r.readAsDataURL(f);
		 r.onload=function  () {
		 document.getElementById('show').src=this.result;
		 };
		 }
</script>
<script type="text/javascript">
$(function(){
	 $("#submit").click(function(){
		 
		 $("#form").submit();
	 })
})
</script>

</body>
</html>